import React, { Component } from 'react'
import Home from './pages/Home'
import { Switch, Route, Redirect } from 'react-router-dom/cjs/react-router-dom.min'
import Ctx from './pages/store/Ctx'
import XiangQing from './pages/XiangQing'


export default class App extends Component {

  state = {
    list: [
      { id: 1, title: '吃饭', price: 10, sed: true, del: false, bz: '吃了我喜欢的饭' ,num:1},
      { id: 2, title: '游戏', price: 8, sed: false, del: false, bz: '玩了我喜欢的游戏',num:2 },
    ]
  }

  //状态切换
  changeSed = (id) => {
    let newlist = [...this.state.list]
    newlist.forEach(item => {
      if (item.id == id) {
        item.sed = !item.sed
      }
    })
    this.setState({ list: newlist })
  }
  //反选 
  changeAllSed = (c) => {
    let newlist = [...this.state.list]
    newlist.forEach(item => {
      item.sed = c
    })
    this.setState({ list: newlist })
  }


  //单独删除
  oneDel = (id) => {
    let newkist = this.state.list.filter(item => {
      return item.id !== id
    })
    this.setState({ list: newkist })
  }
  //批量删除
  allDel = () => {
    let newlist = this.state.list.filter(item => {
      return !item.sed
    })
    this.setState({ list: newlist })
  }

  //删除到回收站
  delHui = (id) => {
    let newlist = [...this.state.list]
    newlist.forEach(item => {
      if(item.id==id){
         item.del = !item.del
      }
    })
    this.setState({list:newlist})
  }

  //不景气
  changeNum=(id,setnum)=>{
    let newlist = [...this.state.list]
    newlist.forEach(item=>{
      if(item.id==id){
        item.num = setnum
      }
    })
    this.setState({list:newlist})
  }



  render() {
    return (<Ctx.Provider value={{
      ...this.state,
      changeSed: this.changeSed,
      changeAllSed: this.changeAllSed,
      oneDel: this.oneDel,
      allDel: this.allDel,
      delHui:this.delHui,
      changeNum:this.changeNum
    }}>
      <div>
        <Switch>
          <Route path='/home/' component={Home} />
          <Route path='/xiangqing/:id' component={XiangQing} />
          <Redirect from='/' to='/home' />
        </Switch>
      </div>
    </Ctx.Provider>

    )
  }
}
